/* eslint-disable no-nested-ternary */
// 登录
import { parse } from 'qs';
import React from 'react';
import { action } from 'mobx';
import { useLocalStore, observer } from 'mobx-react-lite';
import { Input, Checkbox, Button, Form, message, Modal } from 'antd';
import {
  UserOutlined,
  UnlockOutlined,
} from '@ant-design/icons';
import { useHistory, useLocation } from 'react-router';
import { config } from '~/config/config';
import { userService } from '~/services/user';

const FormItem = Form.Item;

export const LoginModal = observer((props: any) => {
  const history = useHistory();
  const location = useLocation();
  const querryParams = parse(location.search, { ignoreQueryPrefix: true });

  const state = props.state;

  const localState = useLocalStore(() => ({
    forwardPage: querryParams.forward || '',
  }));

  const registerModal = props.registerModal;
  const resetModal = props.resetModal;

  const [form] = Form.useForm();
  const { forwardPage } = localState;

  // login
  const onLogin = (values: any) => {
    const { username, password, rememberMe } = values;

    const params = {
      username,
      password,
      rememberMe,
    };

    userService.login(params).then(() => {
      // jump to forwardPage
      if (forwardPage) {
        message.success('Login success', 1, () => {
          window.location.href = forwardPage;
        });
        return;
      }

      // jump to homePage
      message.success('Login success');
      history.push(config.homePage);
    });
  };

  const handleCancel = action(() => {
    state.visible = false;
  });

  return (
    <Modal
      title="LOG IN"
      visible={state.visible}
      onCancel={handleCancel}
      width='380px'
      footer={null}
      {...props}
    >
      <Form className="login-wrap" form={form} onFinish={onLogin}>
        <FormItem
          name="username"
          rules={[{ required: true, message: 'Username is required' }]}
        >
          <Input
            size="large"
            type="text"
            placeholder="User name/Email"
            prefix={<UserOutlined className="prefix-icon"/>}
          />
        </FormItem>

        <FormItem
          className="mb-4"
          name="password"
          rules={[{ required: true, message: 'Password is required' }]}
        >
          <Input
            size="large"
            placeholder="Password"
            type="password"
            prefix={<UnlockOutlined className="prefix-icon"/>}
          />
        </FormItem>

        <FormItem
          className="mb-4"
          name="rememberMe"
          valuePropName="checked"
          rules={[{ required: false }]}
        >
          <Checkbox>Remember me</Checkbox>
        </FormItem>

        <div className="mb-4">
          <Button className="w-full" size="large" type="primary" htmlType="submit">Log in</Button>
        </div>

        <div className="flex justify-between">
          <a className="link" onClick={() => { registerModal.visible = true; }}>Register</a>
          <a className="link" onClick={() => { resetModal.visible = true; }}>Forget password</a>
        </div>
      </Form>
    </Modal>
  );
});
